<template>
  <div>
    <div>{{username}}{{age}}</div>
  <div>{{age}}</div>
  <!-- <button  @click="addage(1)">按钮</button> -->
  <button  @click="add(1)">按钮</button>
  <button @click="asyncadd(20)">按钮加20</button>
  <div>详细地址：{{$store.getters.address}}</div>
  <div>用户token{{$store.state.user.token}}</div>
  <div>应用name{{$store.state.setting.name}}</div>

  <!-- 模块 全局 子模块 -->
  <div><button @click="aa">全局</button></div>
  <div><button @click="aa2">user 模块</button></div>
  </div>
</template>

<script>
//引入辅助函数
import {mapState,mapMutations,mapActions} from 'vuex'
// console.log(mapState(['username','age']));
export default {
  computed:{
    // username(){
    //   return this.$store.state.username
    // },
    // age(){
    //   return this.$store.state.age
    // },
    //mapState 辅助函数
    ...mapState(['username','age'])
  },
created(){
  // console.log(this.$store.state.username);
},
  methods: {
    // addage(data){
    //   this.$store.commit('addage',data)
    // }  
    // ...mapMutations(['addage'])
    //store 的mutation不同名
    ...mapMutations({
      add:"addage"
    }),
    
    // asyncadd(data){
    //   this.$store.dispatch('asyncadd',data)
    // }
    ...mapActions(['asyncadd']),


    //模块
    aa(){
      this.$store.commit('aa')
    },
    //user 子模块
    ...mapMutations('user',{aa2:'aa'})
  }
}
</script>

<style>

</style>